.#{$prefix}--resource-card .#{$prefix}--tile {
  background: $ui-background;
  height: 100%;
  padding: $spacing-05 25% $spacing-05 $spacing-05;
  position: relative;
  transition: background $duration--fast-01;
  text-decoration: none;
}

.#{$prefix}--resource-card .#{$prefix}--tile:hover {
  background: $hover-ui;
}

.#{$prefix}--resource-card__subtitle {
  @include carbon--type-style('productive-heading-03');
  text-decoration: none;
  color: $text-01;
}

.#{$prefix}--resource-card__title {
  @include carbon--type-style('heading-01');
  font-weight: 400;
  text-decoration: none;
  color: $text-01;
}

.#{$prefix}--resource-card__icon--img {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: flex-end;
}

.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper,
.#{$prefix}--resource-card__icon--img img[src*='gif'],
.#{$prefix}--resource-card__icon--img img[src*='svg'] {
  margin-bottom: 0;
}

.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper {
  position: static !important; //important needed to override inline style added by Gatsby
}

.#{$prefix}--resource-card__icon--action {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 20px;
  height: 20px;
}

// Dark
.#{$prefix}--resource-card--dark .#{$prefix}--tile {
  background: $carbon--gray-90; //$ui-background for gray 90 theme
}

.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
  background: $carbon--gray-80; //$hover-ui for gray 90 theme
}

.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__subtitle,
.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__title {
  color: $text-04;
}

.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__icon--action svg {
  fill: $carbon--gray-10; //$icon-01 for grsay 90 theme
}

// Disabled
.#{$prefix}--resource-card--disabled .#{$prefix}--tile:hover {
  background: $ui-background;
  cursor: not-allowed;
}

.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__subtitle,
.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__title {
  color: $disabled-03;
}

.#{$prefix}--resource-card--disabled
  .#{$prefix}--resource-card__icon--action
  svg {
  fill: $disabled-02;
}

.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--img {
  filter: grayscale(100%);
  opacity: 0.5;
}

// Disabled dark
.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
  .#{$prefix}--tile:hover {
  background: $carbon--gray-90; //$ui-background for gray 90 theme
}

.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
  .#{$prefix}--resource-card__subtitle,
.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
  .#{$prefix}--resource-card__title {
  color: $carbon--gray-50; //$disabled-03 for gray 90
}

.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
  .#{$prefix}--resource-card__icon--action
  svg {
  fill: $carbon--gray-70; //$disabled-02 for gray 90
}
